<template>
  <div class='center'>
    <div class="wrapper" v-for='item of imgSrc'>
      <div class="img1">
        <img :src='item.src'>
      </div>
      <div class="img2"></div>
      <p>{{item.title}}</p>     
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductCenter',
  data () {
  	return {
      imgSrc:[{
        src:'http://www.szwws.net/upload/image/20151021150741764176.jpg',
        title:'型号：WS-1618'
      },{
        src:'http://www.szwws.net/upload/image/20151021153226522652.jpg',
        title:'型号：WS-1588'
      },{
        src:'http://www.szwws.net/upload/image/20160517161694039403.jpg',
        title:'型号：WS-1868'
      },{
        src:'http://www.szwws.net/upload/image/2016051716150643643.jpg',
        title:'型号：WS-1918'
      },{
        src:'http://www.szwws.net/upload/image/20160517161314071407.jpg',
        title:'型号：WS-1928'
      },{
        src:'http://www.szwws.net/upload/image/20160517161421402140.jpg',
        title:'型号：WS-688'
      },{
        src:'http://www.szwws.net/upload/image/20160517161154985498.jpg',
        title:'型号：WS-1938'
      },{
        src:'http://www.szwws.net/upload/image/20160517153890039003.jpg',
        title:'型号：WS-1888'
      },{
        src:'http://www.szwws.net/upload/image/20160517153050165016.jpg',
        title:'型号：WS-1898'
      },{
        src:'http://www.szwws.net/upload/image/2015102215020653653.jpg',
        title:'型号：WS-1258'
      },{
        src:'http://www.szwws.net/upload/image/20151022145266866686.jpg',
        title:'型号：WS-1288'
      },{
        src:'http://www.szwws.net/upload/image/20151022145124782478.jpg',
        title:'型号：WS-678'
      },{
        src:'http://www.szwws.net/upload/image/2015102214500664664.jpg',
        title:'型号：WS-878'
      },{
        src:'http://www.szwws.net/upload/image/201510221448004444.jpg',
        title:'型号：WS-1678'
      },{
        src:'http://www.szwws.net/upload/image/20151022144722732273.jpg',
        title:'型号：WS-1688'
      },{
        src:'http://www.szwws.net/upload/image/20151022144581018101.jpg',
        title:'型号：WS-178'
      },{
        src:'http://www.szwws.net/upload/image/20151022144151725172.jpg',
        title:'型号：WS-758'
      },{
        src:'http://www.szwws.net/upload/image/20151022144014171417.jpg',
        title:'型号：WS-1218'
      },{
        src:'http://www.szwws.net/upload/image/20151022143851745174.jpg',
        title:'型号：WS-1778'
      },{
        src:'http://www.szwws.net/upload/image/20151022143544294429.jpg',
        title:'型号：WS-118'
      },{
        src:'http://www.szwws.net/upload/image/20151022143457465746.jpg',
        title:'型号：WS-1188'
      },{
        src:'http://www.szwws.net/upload/image/20151022143336623662.jpg',
        title:'型号：WS-598'
      },{
        src:'http://www.szwws.net/upload/image/20151022143192819281.jpg',
        title:'型号：WS-1358'
      },{
        src:'http://www.szwws.net/upload/image/20151022143015171517.jpg',
        title:'型号：WS-1628'
      },{
        src:'http://www.szwws.net/upload/image/20151022142616711671.jpg',
        title:'型号：WS-988'
      },{
        src:'http://www.szwws.net/upload/image/20151022142411941194.jpg',
        title:'型号：WS-1378'
      },{
        src:'http://www.szwws.net/upload/image/20151022142343814381.jpg',
        title:'型号：WS-1238'
      },{
        src:'http://www.szwws.net/upload/image/20151022142156325632.jpg',
        title:'型号：WS-988'
      },{
        src:'http://www.szwws.net/upload/image/20151022142616711671.jpg',
        title:'型号：WS-1228'
      },{
        src:'http://www.szwws.net/upload/image/20151022142076617661.jpg',
        title:'型号：WS-698'
      },{
        src:'http://www.szwws.net/upload/image/20151022141828312831.jpg',
        title:'型号：WS-1578'
      },{
        src:'http://www.szwws.net/upload/image/20151022141676227622.jpg',
        title:'型号：WS-1768'
      },{
        src:'http://www.szwws.net/upload/image/20151022141439643964.jpg',
        title:'型号：WS-1658'
      },{
        src:'http://www.szwws.net/upload/image/20151022141251925192.jpg',
        title:'型号：WS-1598'
      },{
        src:'http://www.szwws.net/upload/image/20151022141024372437.jpg',
        title:'型号：WS-1338'
      },{
        src:'http://www.szwws.net/upload/image/20151022140997109710.jpg',
        title:'型号：WS-1638'
      },{
        src:'http://www.szwws.net/upload/image/20151022140557335733.jpg',
        title:'型号：WS-1758'
      },{
        src:'http://www.szwws.net/upload/image/20151022140173357335.jpg',
        title:'型号：WS-1818'
      },{
        src:'http://www.szwws.net/upload/image/20151022135727222722.jpg',
        title:'型号：WS-1608'
      },{
        src:'http://www.szwws.net/upload/image/20151022135561916191.jpg',
        title:'型号：WS-1298'
      }
      ]
    }
  },
  methods:{
  	
  } 
}
</script>

<style lang="scss" scoped>
  .wrapper{
    width: 16%;
    padding-bottom: 16%;
    height: 0;
    position: relative;
    background: #FFF;
    border-radius: 5px;
    box-shadow: 3px 3px 10px #c2ced8;
    margin: 10px;
    display:inline-block;
    .img1{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 20px;
      padding: 15px;
      img{
        display:block;
        width:100%
      }
    }
    .img2{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 18px;
      display:none;
      background: #d9e4ec2e;
    }
    p{
      margin: 0;
      position: absolute;
      bottom: 0;
      width: 100%;
      font-size: 12px;
      color: #162338;
      padding: 2px;
    }
  }
  .wrapper:hover .img2{
    display:block;
  }
</style>
